import 'package:flutter/material.dart';


/// `TopHeader` 是 POS 屏幕顶部的标题栏组件。
///
/// 它负责显示动态消息（如新闻滚动条）和当前日期时间。
/// 这个组件演示了如何使用 `Row` 和 `Expanded` 来创建灵活的水平布局。
///
/// It displays a news ticker and the current date and time.
class TopHeader extends StatelessWidget {
  /// 新闻或通知消息。
  final String newsMessage;

  /// 当前日期和时间的字符串表示。
  final String dateTime;

  /// `TopHeader` 的构造函数。
  ///
  /// 提供了默认的消息和日期时间，方便在不同场景下重用。
  const TopHeader({
    super.key,
    this.newsMessage = 'STARBUCKS 新消息: 随着以“携手同行,融合共赢”为主题的项目启动会议圆满召融合共赢”为主题的项目启动会议圆满',
    this.dateTime = '5月19日 周五 14:20:56',
  });

  @override
  Widget build(BuildContext context) {
    // 使用 `Row` 来水平排列标题栏的各个部分。
    return Row(
      // `mainAxisAlignment` 设置主轴（水平方向）的对齐方式。
      // `spaceBetween` 会将子组件均匀分布，首尾子组件贴近边缘。
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        // `Expanded` 使得消息文本可以填充所有可用的水平空间。
        Expanded(
          child: Text(
            newsMessage,
            style: const TextStyle(
              fontSize: 14,
              color: Colors.black87,
            ),
            // 当文本溢出时，显示省略号。
            overflow: TextOverflow.ellipsis,
          ),
        ),
        // 右侧的图标和日期时间部分。
        Row(
          children: [
            const Icon(Icons.person_outline, color: Colors.black54),
            const SizedBox(width: 8),
            const Icon(Icons.wifi_off, color: Colors.black54),
            const SizedBox(width: 16),
            Text(
              dateTime,
              style: const TextStyle(
                fontSize: 14,
                color: Colors.black54,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ],
    );
  }
}